import React, { useState } from 'react';
import { Card, Button, Spin, Form, Col, Row, Select, message } from 'antd';
import {
    SettingOutlined, PlayCircleOutlined, CheckCircleOutlined, LineChartOutlined
    , FileDoneOutlined, ExclamationCircleOutlined, VerticalAlignBottomOutlined,
    FileTextOutlined
} from '@ant-design/icons';

import './index.scss';
function System(props) {
    const [form] = Form.useForm();
    const [options1] = useState([
        {
            value: 'A1',
            label: 'A1',
        },
        {
            value: 'A2',
            label: 'A2',
        },
        {
            value: 'A3',
            label: 'A3',
        },
        {
            value: 'A4',
            label: 'A4',
        },
        {
            value: 'A5',
            label: 'A5',
        }
    ]);
    const [options2] = useState([
        {
            value: 'red',
            label: '🔴 红色',
        },
        {
            value: 'green',
            label: '🟢 绿色',
        },
        {
            value: 'blue',
            label: '🔵 蓝色',
        },
        {
            value: 'yellow',
            label: '🟡 黄色',
        }
    ]);
    const [loading, setLoading] = useState(false);
    const [result, setResult] = useState([]);
    function onFinish() {
        message.success("开灯")
    }
    function close() {
        message.success("关灯")
    }
    function onTest() {
        setLoading(true);
        setResult([
            {
                info: 'Red indicator - Passed',
                txt: 'Address A1 Test',
                status: 'success',
            },
            {
                info: 'Green indicator - Passed',
                txt: 'Address A2 Test',
                status: 'success',
            },
            {
                info: 'Blue indicator - Passed',
                txt: 'Address A3 Test',
                status: 'error',
            }
        ])
        setTimeout(() => {
            setLoading(false);
        }, 3000);
    }
    return (
        <div className="system-container">
            <div className="row-a1">
                <div className="left">
                    <div className="con-a1">
                        <Card title={
                            <div className='title'>
                                <SettingOutlined style={{ color: '#08c' }} />
                                <span className="tit">控制系统</span>
                            </div>
                        }>
                            <Row>
                                <Col span={24}>
                                    <div className="start-btn btn">
                                        <PlayCircleOutlined />
                                        <span>
                                            启动系统
                                        </span>
                                    </div>
                                    <div className="pause-btn btn">
                                        <PlayCircleOutlined />
                                        <span>
                                            停止系统
                                        </span>
                                    </div>
                                </Col>
                                <Col span={24}>
                                    <div className="reset-btn btn">
                                        <PlayCircleOutlined />
                                        <span>
                                            启动系统
                                        </span>
                                    </div>
                                </Col>
                                <Col span={24}>
                                    <div className="info">
                                        <div className="icon">
                                            <ExclamationCircleOutlined style={{ color: '#0c5460' }} />
                                        </div>
                                        <div className="text">
                                            <div className="txt">
                                                <span className='tit'>
                                                    提示:
                                                </span>
                                                <span className='in'>
                                                    停止或重启系统将中断当前所有操作，请确保没有进行中的任务
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </Col>
                            </Row>
                        </Card>
                    </div>
                    <div className="con-a2">
                        <Card title={
                            <div className='title'>
                                <CheckCircleOutlined style={{ color: '#08c' }} />
                                <span className="tit">日志管理</span>
                            </div>
                        }>
                            <div className="test-btn" onClick={onTest}>
                                <VerticalAlignBottomOutlined />
                                <span>
                                    下载日志文件(2.3MB)
                                </span>
                            </div>
                        </Card>
                    </div>
                </div>
                <div className="right">
                    <div className="con-a3">
                        <Card title={
                            <div className='title'>
                                <LineChartOutlined style={{ color: '#08c' }} />
                                <span className="tit">运行统计</span>
                            </div>
                        }>
                            <div className="list">
                                <div className="li">
                                    <div className="tit">
                                        系统状态
                                    </div>
                                    <div className="text">
                                        <div className="light">

                                        </div>
                                        <div className="txt">
                                            运行中
                                        </div>
                                    </div>
                                </div>
                                <div className="li">
                                    <div className="tit">
                                        运行时长
                                    </div>
                                    <div className="text">
                                        <div className="txt">
                                            12h 34m
                                        </div>
                                    </div>
                                </div>
                                <div className="li">
                                    <div className="tit">
                                        今日操作次数
                                    </div>
                                    <div className="text">
                                        <div className="txt">
                                            1247
                                        </div>
                                    </div>
                                </div>
                                <div className="li">
                                    <div className="tit">
                                        错误次数
                                    </div>
                                    <div className="text">
                                        <div className="txt error">
                                            3
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </Card>
                    </div>
                    <div className="con-a4">
                        <Card title={
                            <div className='title'>
                                <span className="tit">实时日志</span>
                            </div>
                        }>
                            <div className="list">
                                <div className="li">
                                    <div className="time">14:23:45</div>
                                    <div className="status">
                                        INFO
                                    </div>
                                    <div className="msg">
                                        - 系统运行正常
                                    </div>
                                </div>
                                <div className="li">
                                    <div className="time">14:23:30</div>
                                    <div className="status">
                                        INFO
                                    </div>
                                    <div className="msg">
                                        - 处理库位操作请求
                                    </div>
                                </div>
                                <div className="li">
                                    <div className="time">14:23:15</div>
                                    <div className="status">
                                        INFO
                                    </div>
                                    <div className="msg">
                                        - 串口通信正常
                                    </div>
                                </div>
                            </div>
                        </Card>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default System;